<template>
  <!-- <img alt="Vue logo" src="./assets/logo.png"> -->
  <!-- <HelloWorld msg="Welcome to Your Vue.js App"/> -->
  
  <!-- 添加10.2my.vue组件 -->
  <h2>10.2my.vue 组件展示</h2>
  <MyButtonDemo />
  
  <!-- 添加10.3my.vue组件 -->
  <h2>10.3my.vue 组件展示</h2>
  <MyButtonGroup />
  
  <!-- 全局组件展示 -->
  <h2>全局组件展示</h2>
  <GlobalButton @click="handleGlobalButtonClick" />
  <p v-if="globalClickCount > 0">全局按钮已被点击 {{ globalClickCount }} 次</p>

  <!-- 添加10.4my.vue组件 -->
  <h2>10.4 MyLink 组件展示</h2>
  <MyLink />

  <!-- 添加10.5my.vue组件 -->
  <h2>10.5 MySpace 组件展示</h2>
  <MySpace />

  <!-- 添加10.6my.vue组件 -->
  <h2>10.6 MyDirection 组件展示</h2>
  <MyDirection />

  <!-- 添加10.7my.vue组件 -->
  <h2>10.7 MyLayout 组件展示</h2>
  <MyLayout />

  <h2>10.8 MyContainer 组件展示</h2>
  <MyContainer />

  <h2>10.9 MyRadio 组件展示</h2>
  <MyRadio />

  <h2>10.10 MyCheckbox 组件展示</h2>
  <MyCheckbox />

  <h2>10.11 MyInput 组件展示</h2>
  <MyInput />

  <h2>10.12 MyComplexInput 组件展示</h2>
  <MyComplexInput />

  <h2>10.13 MyAutocomplete 组件展示</h2>
  <MyAutocomplete />

  <h2>10.14 MyNumInput 组件展示</h2>
  <MyNumInput />

  <h2>10.15 MySelect 组件展示</h2>
  <MySelect />
  
  <h2>10.16 MySelectGroup 组件展示</h2>
  <MySelectGroup />

  <h2>10.17 MyCascader 组件展示</h2>
  <MyCascader />

  <h2>10.18 MySwitch 组件展示</h2>
  <MySwitch />

  <h2>10.19 MySlider 组件展示</h2>
  <MySlider />

  <h2>10.20 MyTimePicker 组件展示</h2>
  <MyTimePicker />

  <h2>10.21 MySelectTime 组件展示</h2>
  <MySelectTime />

  <h2>10.22 MyDatePicker 组件展示</h2>
  <MyDatePicker />

  <h2>10.23 MyColorPicker 组件展示</h2>
  <MyColorPicker />

  <h2>10.24 MyAlert 组件展示</h2>
  <MyAlert />

  <h2>10.25 MyNotify 组件展示</h2>
  <MyNotify />

  <h2>10.26 MyEleMessage 组件展示</h2>
  <MyEleMessage />

  <h2>10.27 MyTable 组件展示</h2>
  <MyTable />

  <h2>10.28 MyMenu 组件展示</h2>
  <MyMenu />

  <h2>10.29 MyTab 组件展示</h2>
  <MyTab />

  <h2>10.30 MyBadge 组件展示</h2>
  <MyBadge />

  <h2>10.31 MyResult 组件展示</h2>
  <MyResult />

  <h2>10.32 MyDrawer 组件展示</h2>
  <MyDrawer />

  <h2>10.33 MyShop 组件展示</h2>
  <MyShop />

</template>

<script>
// import HelloWorld from './components/HelloWorld.vue'
// 导入10.2 MyButtonDemo 组件
import MyButtonDemo from './components/10_2_button.vue'
// 导入10.3 MyButtonGroup 组件
import MyButtonGroup from './components/10_3_button_group.vue'
// 导入10.4 MyLink 组件
import MyLink from './components/10_4_link.vue'
// 导入10.5 MySpace 组件
import MySpace from './components/10_5_space.vue'
// 导入10.6 MyDirection 组件
import MyDirection from './components/10_6_direction.vue'
// 导入10.7 MyLayout 组件
import MyLayout from './components/10_7_layout.vue'
// 导入10.8 MyContainer组件
import MyContainer from './components/10_8_container.vue'
// 导入10.9 MyRadio 组件
import MyRadio from './components/10_9_radio.vue'
// 导入10.10 MyCheckbox 组件
import MyCheckbox from './components/10_10_checkbox.vue'
// 导入10.11 MyInput 组件
import MyInput from './components/10_11_input.vue'
// 导入10.12 MyComplexInput 组件
import MyComplexInput from './components/10_12_complex_input.vue'
// 导入10.13 MyAutocomplete 组件
import MyAutocomplete from './components/10_13_autocomplete.vue'
// 导入10.14 MyNumInput 组件
import MyNumInput from './components/10_14_num_input.vue'
// 导入10.15 MySelect 组件
import MySelect from './components/10_15_select.vue'
// 导入10.16 MySelectGroup 组件
import MySelectGroup from './components/10_16_select_group.vue'
// 导入10.17 MyCascader 组件
import MyCascader from './components/10_17_cascader.vue'
// 导入10.18 MySwitch 组件
import MySwitch from './components/10_18_switch.vue'
// 导入10.19 MySlider 组件
import MySlider from './components/10_19_slider.vue'
// 导入10.20 MyTimePicker 组件
import MyTimePicker from './components/10_20_time_picker.vue'
// 导入10.21 MySelectTime 组件
import MySelectTime from './components/10_21_select_time.vue'
// 导入10.22 MyDatePicker 组件
import MyDatePicker from './components/10_22_date_picker.vue'
// 导入10.23 MyColorPicker 组件
import MyColorPicker from './components/10_23_color_picker.vue'
// 导入10.24 MyAlert 组件
import MyAlert from './components/10_24_alert.vue'
// 导入10.25 MyNotify 组件
import MyNotify from './components/10_25_notify.vue'
// 导入10.26 MyEleMessage 组件
import MyEleMessage from './components/10_26_ele_message.vue'
// 导入10.27 MyTable 组件
import MyTable from './components/10_27_table.vue'
// 导入10.28 MyMenu 组件
import MyMenu from './components/10_28_menu.vue'
// 导入10.29 MyTab 组件
import MyTab from './components/10_29_tab.vue'
// 导入10.30 MyBadge 组件
import MyBadge from './components/10_30_badge.vue'
// 导入10.31 MyResult 组件
import MyResult from './components/10_31_result.vue'
// 导入10.32 MyDrawer 组件
import MyDrawer from './components/10_32_drawer.vue'
// 导入10.33 MyShop 组件
import MyShop from './components/10_33_shop.vue'

export default {
  name: 'App',
  components: {
    // 注意：全局组件不需要在components中注册
    // HelloWorld,
    MyButtonDemo,
    MyButtonGroup,
    MyLink,
    MySpace,
    MyDirection,
    MyLayout,
    MyContainer,
    MyRadio,
    MyCheckbox,
    MyInput,
    MyComplexInput,
    MyAutocomplete,
    MyNumInput,
    MySelect,
    MySelectGroup,
    MyCascader,
    MySwitch,
    MySlider,
    MyTimePicker,
    MySelectTime,
    MyDatePicker,
    MyColorPicker,
    MyAlert,
    MyNotify,
    MyEleMessage,
    MyTable,
    MyMenu,
    MyTab,
    MyBadge,
    MyResult,
    MyDrawer,
    MyShop,
  },
  data() {
    return {
      globalClickCount: 0
    }
  },
  methods: {
    handleGlobalButtonClick(count) {
      this.globalClickCount = count
    }
  }
}
</script>

<style lang="scss">
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.box-card {
  width: 480px;
  margin: 10px 0;
}
</style>